<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 自定义过渡类名 */
    /* enterFrom 进入前
      * enterActive 进入中
      * enterTo 进入后
      * leaveFrom 离开前
      * leaveActive 离开中
      * leaveTo 离开后
      */
    .x-enter-from,
    .x-leave-to {
        opacity: 0;
    }

    .x-enter-active,
    .x-leave-active {
        transition: all 1s ease;
    }
</style>

<body>
    <div id="app"></div>

</body>
<script type="module">
    // import {
    //     defineAsyncComponent,
    //     render,
    //     h,
    //     Transition,
    //     onMounted
    // } from '/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.prod.js'
    import {
        defineAsyncComponent,
        render,
        h,
        Transition,
    } from "./runtime-dom.js"

    const props = {
        name: 'x',
        onBeforeEnter() {
            console.log('onBeforeEnter:进入前', arguments)
        },
        onEnter() {
            console.log('onEnter:进入', arguments)
        },
        onLeave() {
            console.log('onLeave:离开', arguments)
        },

    }


    render(h(Transition, props, {
        a: 1,
        default() {
            return h('div', {

                style: {
                    width: '100px',
                    height: '100px',
                    background: 'red'
                }
            })
        }
    }), document.getElementById('app'))
    setTimeout(() => {
        render(h(Transition, props, {
            b: 2,
            default() {
                return h('p', {

                    style: {
                        width: '100px',
                        height: '100px',
                        background: 'blue'
                    }
                })
            }
        }), document.getElementById('app'))
    }, 2000)

</script>

</html>